<nav class="navigation-1 clearfix">

  <div id="top" class="top-nav clearfix">
    <div class="container">
      <div class="nav float-start">
        <ul class="list-inline" data-v-component-site>
          <li class="list-inline-item" data-v-if="site.phone-number">
            <a href="tel:5511112377" data-v-site-phone-number>
              <i class="la la-phone"></i>
              <span class="d-none d-md-inline text-muted" data-v-site-phone-number>+55 (111) 123 777</span>
            </a>
          </li>
          <li class="list-inline-item" data-v-if="site.contact-email">
            <a href="mailto:contact@mysite.com" data-v-site-contact-email>
              <i class="la la-envelope"></i>
              <span class="d-none d-md-inline text-muted" data-v-site-contact-email>contact@mysite.com</span>
            </a>
          </li>
          <li class="list-inline-item"></li>
        </ul>
      </div>
      <div class="nav float-end">
        <ul class="list-inline">
          <!--
					<li class="list-inline-item"><a href="#" id="wishlist-total" title="Wish List (0)"><i class="la la-heart"></i> <span class="d-none d-md-inline">Favorites</span></a></li>
					<li class="list-inline-item"><a href="#" title="Checkout"><i class="la la-share"></i> <span class="d-none d-md-inline">Checkout</span></a></li>
					<li class="list-inline-item">
						<div class="dropdown">
							<a href="" class="dropdown-toggle" data-bs-toggle="dropdown"><i class="la la-user"></i> <span class="d-none d-md-inline">My Account</span></i></a>
							<ul class="dropdown-menu dropdown-menu-right">
								<li><a href="#" class="dropdown-item">Register</a></li>
								<li><a href="#" class="dropdown-item">Login</a></li>
							</ul>
						</div>
					</li>
					-->
          <li class="list-inline-item">

            <a id="color-theme-switch" href="javascript:void(0);" title="Switch sidebar color theme">
              <i class="la la-sun la-lg"></i>
            </a>

          </li>
          <li class="list-inline-item">
            <div data-v-component-currency>
              <form method="post" enctype="multipart/form-data" id="form-currency">

                <a class="dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <!-- <i class="la la-dollar-sign me-1"></i> -->
                  <span class="d-none d-md-inline" data-v-currency-info-name>USD</span>
                </a>


                <div class="dropdown-menu dropdown-menu-end">

                  <div data-v-currency>
                    <button class="dropdown-item" type="submit" value="EUR" name="currency" data-v-currency-code>
                      <span data-v-currency-sign_start>€</span>
                      <span data-v-currency-sign_end>€</span>
                      <span class="ms-1" data-v-currency-name>Euro</span>
                    </button>
                  </div>

                  <div data-v-currency>
                    <button class="dropdown-item" type="submit" value="GBP" name="currency" data-v-currency-code>
                      <span data-v-currency-sign_start>£</span>
                      <span data-v-currency-sign_end>£</span>
                      <span class="ms-1" data-v-currency-name>Pound Sterling</span>
                    </button>
                  </div>

                  <div data-v-currency>
                    <button class="dropdown-item" type="submit" value="USD" name="currency" data-v-currency-code>
                      <span data-v-currency-sign_start>$</span>
                      <span data-v-currency-sign_end>$</span>
                      <span class="ms-1" data-v-currency-name>US Dollar</span>
                    </button>
                  </div>

                </div>
              </form>
            </div>
          </li>
          <li class="list-inline-item">
            <div data-v-component-language>
              <form method="post" enctype="multipart/form-data" id="form-language">

                <a class="dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <!-- <i class="la la-flag me-1"></i> -->
                  <!-- 
									<img src="" data-v-language-info-img>
									-->
                  <span class="d-none d-md-inline" data-v-language-info-name>English</span>
                </a>


                <div class="dropdown-menu dropdown-menu-end">

                  <div data-v-language>
                    <button class="dropdown-item" type="submit" value="eng" name="language" data-v-language-code>
                      <!-- <i class="la la-flag la-lg me-2"></i> -->
                      <img src="" loading="lazy" class="me-1" data-v-language-img>

                      <!-- <a href="" data-v-language-url> -->
                      <span data-v-language-name>English</span>
                      <!-- </a> -->
                    </button>
                  </div>

                  <div data-v-language>
                    <button class="dropdown-item" type="submit" value="ro" name="language" data-v-language-code>
                      <!-- <i class="la la-flag la-lg me-2"></i> -->
                      <img src="" loading="lazy" class="me-1" data-v-language-img>
                      <!-- <a href="" data-v-language-url>  -->
                      <span data-v-language-name>Romanian</span>
                      <!-- </a>  -->
                    </button>
                  </div>

                </div>
              </form>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="navbar navbar-expand-md">

    <div class="container">
      <div data-v-component-site>
        <a class="navbar-brand" href="/" data-v-url-params='{"host":"www.*.*"}'>
          <img src="img/logo.png" loading="lazy" class="logo-default" data-v-site-logo>
          <img src="img/logo.png" loading="lazy" class="logo-sticky" data-v-site-logo-sticky>
          <img src="img/logo-white.png" loading="lazy" class="logo-default-dark" data-v-site-logo-dark>
          <img src="img/logo-white.png" loading="lazy" class="logo-default-dark-sticky" data-v-site-logo-dark-sticky>
        </a>
      </div>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar" data-v-component-menu="header" data-v-slug="main-menu">
        <ul class="navbar-nav ms-auto" data-v-menu-items>
          <li class="nav-item dropdown" data-v-menu-item data-v-class-if-has-dropdown="category.children > 0">

            <a class="nav-link" href="#" data-v-class-if-dropdown-toggle="category.children > 0" aria-haspopup="true" aria-expanded="false" data-v-menu-item-url>
              <span data-v-menu-item-name>Resources</span>
            </a>

            <div class="dropdown-menu" data-v-menu-item-recursive>
              <div data-v-menu-item class="nav-item" data-v-menu-item data-v-class-if-dropdown="category.children > 0">
                <a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
                  <span data-v-menu-item-name>User Documentation</span>
                </a>
              </div>
              <div data-v-menu-item class="nav-item" data-v-menu-item data-v-class-if-dropdown="category.children > 0">
                <a class="dropdown-item" href="https://github.com/givanz/VvvebJs/wiki" data-v-menu-item-url>
                  <span data-v-menu-item-name>Developer Documentation</span>
                </a>
              </div>
            </div>
          </li>
          <li class="nav-item" data-v-menu-item>
            <a class="nav-link" href="https://blog.vvveb.com" data-v-menu-item-url>
              <span data-v-menu-item-name>Blog</span>
            </a>
          </li>
          <li class="nav-item" data-v-menu-item>
            <a class="nav-link" href="https://www.vvveb.com/page/contact" data-v-menu-item-url>
              <span data-v-menu-item-name>Contact</span>
            </a>
          </li>
          <li class="nav-item" data-v-menu-item>
            <a class="nav-link" href="https://www.vvveb.com" data-v-menu-item-url>
              <span data-v-menu-item-name>About us</span>
            </a>
          </li>
          <li class="nav-toggle">
            <!-- User Login Info -->
            <div class="dropdown user-box nav-item">
              <a class="dropdown-toggle nav-link " href role="button" id="user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-v-url="user/index">
                <!-- <img src="img/user.svg" loading="lazy" width="20" alt> -->
                <i class="la la-lg la-user"></i>
              </a>

              <div class="dropdown-menu dropdown-menu-end login-box p-4" aria-labelledby="user-dropdown">

                <div data-v-component-user>

                  <div class="notifications" data-v-notifications>

                    <div class="alert alert-danger d-flex alert-dismissable" role="alert" data-v-notification-error data-v-type="login">

                      <div class="icon align-middle me-2">
                        <i class="align-middle la la-2x lh-1 la-exclamation-triangle"></i>
                      </div>

                      <div class="flex-grow-1 align-self-center text-small">
                        <div>
                          <div data-v-notification-text>
                            This is a placeholder for a notification message.
                          </div>
                        </div>
                      </div>


                      <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">
                          <!-- <i class="la la-times"></i> -->
                        </span>
                      </button>
                    </div>

                    <div class="alert alert-success d-flex  alert-dismissable d-flex" role="alert" data-v-notification-success data-v-type="login">

                      <div class="icon align-middle me-2">
                        <i class="align-middle la la-2x lh-1 la-check-circle"></i>
                      </div>

                      <div class="flex-grow-1 align-self-center align-middle" data-v-notification-text>
                        This is a placeholder for a success message.
                      </div>

                      <button type="button" class="btn-close align-middle" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">
                          <!-- <i class="la la-times"></i> -->
                        </span>
                      </button>
                    </div>

                    <div class="alert alert-primary d-flex alert-dismissable d-flex" role="alert" data-v-notification-info data-v-type="login">

                      <div class="icon align-middle me-2">
                        <i class="align-middle la la-2x lh-1  la-info-circle"></i>
                      </div>

                      <div class="flex-grow-1 align-self-center" data-v-notification-text>
                        This is a placeholder for a info message.
                      </div>

                      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">
                          <!-- <i class="la la-times"></i> -->
                        </span>
                      </button>
                    </div>

                  </div>

                  <form action method="post" enctype="multipart/form-data" data-v-url="user/login" data-v-vvveb-action="login" data-v-vvveb-on="submit" class="login-form">

                    <input type="hidden" name="csrf" data-v-csrf>

                    <div class="login-form" data-v-if-not="component.user_id">

                      <div class="mb-3">
                        <label class="form-label" for="input-email">E-Mail Address</label>
                        <input type="email" name="email" value placeholder="E-Mail Address" id="input-email" class="form-control" required>
                      </div>

                      <div class="mb-3">
                        <label class="form-label" for="input-password">Password</label>
                        <input type="password" minlength="4" autocorrect="off" autocomplete="current-password" name="password" value="" placeholder="Password" id="input-password" class="form-control" required>
                      </div>

                      <button type="submit" value="Login" class="btn btn-primary btn-login w-100">

                        <span class="loading d-none">
                          <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
                          </span>
                          <span>Authenticating</span>...
                        </span>

                        <span class="button-text">
                          Login <i class="la la-arrow-right float-end ms-2"></i>
                        </span>

                      </button>
                      <div class="my-2"></div>
                      <a href="/user/reset" data-v-url="user/reset/index" class="my-2">Forgotten Password</a>

                      <div class="my-2"></div>
                      <!--
		<a href="#">
			<span class="btn btn-secondary btn-sm">
				  <i class="lab la-google la-lg"></i>
			</span>
		</a>
		<a href="#">
			<span class="btn btn-secondary btn-sm">
			  <i class="lab la-facebook la-lg"></i>
			</span>
		</a> -->
                      <hr>
                      <span>Don’t have an account?</span>
                      <a href="/user/signup" data-v-url="user/signup/index">Register Account</a>

                    </div>


                    <div class="user-form" data-v-if="component.user_id">
                      <div>Welcome <b data-v-user-first_name data-filter-capitalize>John</b>
                        <b data-v-user-last_name data-filter-capitalize>Doe</b>
                      </div>

                      <ul class="m-2 list-unstyled">
                        <li>
                          <a href="user" data-v-url="user/index">My account</a>
                        </li>
                        <li>
                          <a href="user/comments" data-v-url="user/comments/index">Comments</a>
                        </li>
                        <li>
                          <a href="user/orders" data-v-url="user/orders/index">Orders</a>
                        </li>
                        <li>
                          <a href="user/downloads" data-v-url="user/downloads/index">Downloads</a>
                        </li>
                        <li>
                          <a href="user/profile" data-v-url="user/profile/index">Profile</a>
                        </li>
                      </ul>


                      <input type="hidden" name="logout">

                      <button type="submit" value="logout" class="btn btn-primary w-100">

                        <span class="loading d-none">
                          <span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true">
                          </span>
                          <span>Loading ...</span>...
                        </span>

                        <span class="button-text">
                          Logout
                        </span>

                      </button>
                    </div>
                  </form>

                </div>
              </div>
            </div>

          </li>
          <li class="nav-toggle">
            <!-- Cart Area -->
            <div class="dropdown nav-item mini-cart" data-v-component-cart>

              <a class="dropdown-toggle cart-info nav-link " href role="button" id="cart-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-v-url="cart/cart/index">
                <!-- <img src="img/bag.svg" width="20" alt> -->
                <i class="la la-lg la-shopping-bag"></i>
                <strong class="text-top text-bold" data-v-total_items data-v-if="cart.total_items > 0"></strong>
              </a>


              <div class="dropdown-menu dropdown-menu-end cart-box" aria-labelledby="cart-dropdown">

                <div>
                  <div class="table-responsive">
                    <table class="table cart-table align-middle mb-0">
                      <tbody>


                        <tr data-v-cart-product>
                          <td class="text-center">
                            <a href="#40" data-v-cart-product-url>
                              <img src="img/demo/product.jpg" alt="Product name" class="img-rounded" loading="lazy" data-v-cart-product-image width=50>
                            </a>
                          </td>
                          <td class="text-start">
                            <a href="#40" class="d-block" data-v-cart-product-url data-v-cart-product-name>
                              Product name
                            </a>

                            <span data-v-cart-product-quantity>1</span>
                            <i class="la la-times text-muted"></i>
                            <span data-v-cart-product-price_tax_formatted>$123.20</span>

                            <div class="option" data-v-if="product.option">
                              <div class="" data-v-product-option>
                                <span data-v-product-option-option>Color</span>: <span data-v-product-option-name>Red</span>
                              </div>
                              <div class="" data-v-product-option>
                                <span data-v-product-option-option>Size</span>: <span data-v-product-option-name>XL</span>
                              </div>
                              <div class="" data-v-product-option>
                                <span data-v-product-option-option>Material</span>: <span data-v-product-option-name>Wool</span>
                              </div>
                            </div>

                            <div class="subscription" data-v-if="product.subscription">
                              <span data-v-product-subscription-name>Subscription plan</span>
                            </div>
                          </td>
                          <td class="text-end">
                            <a class="btn btn-outline-secondary btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
                              <i class="la la-times"></i>
                            </a>
                          </td>
                        </tr>
                        <tr data-v-cart-product>
                          <td class="text-center">
                            <a href="#40" data-v-cart-product-url>
                              <img src="img/demo/product.jpg" alt="Product name" class="img-rounded" loading="lazy" data-v-cart-product-image width=50>
                            </a>
                          </td>
                          <td class="text-start">
                            <a href="#40" class="d-block" data-v-cart-product-url data-v-cart-product-name>
                              Product name
                            </a>

                            <span data-v-cart-product-quantity>1</span>
                            <i class="la la-times text-muted"></i>
                            <span data-v-cart-product-price_tax_formatted>$123.20</span>


                          </td>
                          <td class="text-end">
                            <a class="btn btn-outline-secondary btn-sm border-0" data-v-vvveb-action="removeFromCart" data-v-cart-product-remove-url>
                              <i class="la la-times"></i>
                            </a>
                          </td>
                        </tr>
                        <tr data-v-if-not="cart.total_items">
                          <td colspan="100">
                            <div class="d-flex  p-2">
                              <div class="text-center p-2 opacity-75">
                                <!-- <img src="img/bag.svg" width="20" alt> -->
                                <i class="la la-2x la-shopping-bag"></i>
                              </div>
                              <div class="p-2">
                                <strong>Empty cart</strong>
                                <br>
                                <span class="text-muted">No products added yet!</span>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>

                    </table>
                  </div>

                  <div class="p-3 pt-0 border-top" data-v-if="cart.total_items">
                    <div class="table-responsive mb-2" data-v-cart-totals>
                      <table class="table mb-0 cart-table cart-total" cellspacing="0">
                        <tfoot>
                          <tr data-v-cart-total>
                            <td colspan="5" class="text-end">
                              <small data-v-cart-total-title>Sub-Total</small>:
                            </td>
                            <td class="text-end">
                              <span data-v-cart-total-text data-v-if="total.text"> - </span>
                              <span data-v-cart-total-value_formatted data-v-if="total.value > 0">$101.00</span>
                            </td>
                          </tr>
                          <tr data-v-cart-total>
                            <td colspan="5" class="text-end">
                              <small>Eco Tax (2.00):</small>
                            </td>
                            <td class="text-end">$2.00</td>
                          </tr>
                          <tr data-v-cart-total>
                            <td colspan="5" class="text-end">
                              <small>VAT (19%):</small>
                            </td>
                            <td class="text-end">$20.20</td>
                          </tr>
                          <tr data-v-cart-total>
                            <td colspan="5" class="text-end">
                              <small>Total:</small>
                            </td>
                            <td class="text-end">$123.20</td>
                          </tr>
                          <tr>
                            <td colspan="5" class="text-end">Total:</td>
                            <td class="text-end" data-v-grand-total_formatted>$0</td>
                          </tr>
                        </tfoot>

                      </table>
                    </div>

                  </div>

                  <div class="row mt-2 g-2 px-3 pb-2" data-v-if="cart.total_items">
                    <div class="col-6">
                      <a href="" class="btn btn-light btn-sm border w-100" data-v-url="cart/cart/index">
                        <i class="la la-shopping-cart la-lg"></i>
                        <span>View cart</span>
                      </a>
                    </div>
                    <div class="col-6">
                      <a href="" class="btn btn-primary btn-sm w-100" data-v-url="checkout/checkout/index">
                        <span>Checkout</span>
                        <i class="la la-arrow-right la-lg"></i>
                      </a>
                    </div>
                  </div>


                </div>
              </div>

            </div>

          </li>
        </ul>

        <div class="search-area toggle-hover">
          <form action="/search" method="get" data-v-action="/search">
            <input type="hidden" name="route" value="search">
            <div class="input-group">
              <input type="search" name="search" class="form-control" id="headerSearch" placeholder="Type for search" data-v-vvveb-action="search" data-v-vvveb-on="keyup">
              <button class="btn border-0" type="submit">
                <div class="la-flip-horizontal">
                  <i class="la la-search la-lg" aria-hidden="true"></i>
                </div>
              </button>
            </div>
          </form>
        </div>

      </div>
    </div>
  </div>
</nav>